<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/lib/bootstrap.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>
    <script src="js/lib/vue.min.js"></script>
    <script src="js/lib/vue-resource.js"></script>
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    body{
        font-size:12px;
    }
    table,
    th,
    td {
        border: 1px solid #eee;
        border-collapse: collapse;
        padding:10px;
        vertical-align: middle !important;
    }
    table td:nth-child(odd) {
       

    }
    /* table td:nth-child(1) {
         background-color: #f2f2f2;
    } */
    table tr:nth-child(even) {
        background-color:#ffffff;
    }
    table tr:nth-child(2) {
        background-color:#f2f2f2;
    }
    .btn{
        padding:2px 3px ;
    }

    #tan{
        width:600px;
        height:400px;
        position:fixed;
        left:200px;
        top:50px;
        background:#000000;
        opacity: 0.8;
        z-index:1000;
        display:none;
    }
    #tantwo{
        width:600px;
        height:500px;
        position:fixed;
        left:200px;
        top:10px;
        background:#000000;
        opacity: 0.8;
        z-index:1000;
        display:none;
    }
    #tanth{
        width:600px;
        height:500px;
        position:fixed;
        left:200px;
        top:10px;
        background:#000000;
        opacity: 0.8;
        z-index:1000;
        display:none;
    }
    #bbt{
        position:absolute;
        right:0;
        top:0
    }
    #tanth2{
        width:600px;
        height:550px;
        position:fixed;
        left:200px;
        top:10px;
        background:#fff;
        opacity:1;
        z-index:1000;
        display:none;
        box-shadow:0px 5px 100px #000;
    }
</style>
<body>
<div class="" id="box" style="position:relative;">
    <div style="padding:15px 5px 0px 5px;border:.5px solid #ccc;margin-bottom:15px;width:80%;margin:20px 10%;box-shadow:3px 5px 15px">
        <table class="table table-hover">
            <tbody>
            <tr>
                <th colspan="15">管理所有的下级会员：</th>
            </tr>
            <tr>
                <td colspan="15">
                    手机号：
                    <input type="text" class="form-control" name="" id="" v-model="ph" value="" style="width:200px;display:inline-block"/>
                    <button v-on:click="shouji()" class="btn btn-default btn-sm">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="error" style="color:red"></span>
                    <select name="" id="sel" v-on:change="xuan()" class="form-control" style="width:100px;display:inline-block">
                        <option value="">请选择</option>
                        <option value="0">未审核</option>
                        <option value="1">审核通过</option>
                        <option value="2">审核失败</option>
                       <!--  <option value="3">未提交</option> -->
                    </select>
                    身份证号码查询：
                    <input type="text" v-model="idcade" class="form-control" style="width:200px;display:inline-block">
                    <button v-on:click="cade()" class="btn btn-default">查询</button>
                </td>
            </tr>
            <tr class="text-center" style="background:#f2f2f2;font-weight:600;color:#666;font-size:14px">
                <td style="width:45px">序号</td>
                <td>用户编号</td>
                <td>手机号码</td>
                <td>真实姓名</td>
                <td>实名状态</td>
                <td>注册日期</td>
                <td>代理等级</td>
                <td>登陆权限</td>
                <td>查看上级</td>
                <td>费率</td>
                <td>变更级别</td>
                <td>实名信息</td>
                <td>实名审核</td>
                <td>商户审核</td>
                <td>信息备注</td>
            </tr>
            <tr class="text-center" v-for="(i,index) in list">
                <td style="width:30px">{{index+1}}</td>
                <td>{{i.userid}}</td>
                <td>{{i.phone}}</td>
                <td>{{i.realname}}</td>
                <td>{{i.realnameStatus | todo2}}</td>
                <td>{{i.createTime | time}}</td>
                <td>{{i.grade | todo}}</td>
                <td><a href="用户角色权限管理新增.html"><button class="btn btn-default btn-xs" v-on:click="mv(i)">更改权限</button></a></td>
                <td><button class="btn btn-default btn-xs" v-on:click="shang(i)">查看上级</button></td>
                <td><a href="zy03.html"><button class="btn btn-default btn-xs" v-on:click="mk(i)">更改费率</button></a></td>
                <td><button class="btn btn-default btn-xs" v-on:click="mm(i)">变更</button></td>
                <td><button class="btn btn-default btn-xs" v-on:click="shi(i)">实名上传</button></td>
                <td><a href="shenhe.html"><button class="btn btn-default btn-xs" v-on:click="mc(i)">审核</button></a></td>
                <td><a href="shenhe2.html"><button class="btn btn-default btn-xs" v-on:click="mc2(i)">审核</button></a></td>
                <td><button class="btn btn-default btn-xs" v-on:click="bz()">备注</button></td>
            </tr>
            <tr>
                <td colspan="15" class="text-center">
                    第<input class="form-control" id="ye" v-model="ye1" style="width:50px;height:26px;display:inline-block" type="text"/>页
                    <button class="btn btn-default" v-on:click="xia()">GO</button>
                    总共{{pages}}条数据    共{{page}}页
                    <button class="btn btn-default" v-on:click="home()">首页</button>
                    <button class="btn btn-default" v-on:click="sh()">上一页</button>
                    <button class="btn btn-default" v-on:click="next()">下一页</button>
                    <button class="btn btn-default" v-on:click="last(page)">尾页</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="tan">
        <h4 style="color:#fff;text-align: center;">修改信息</h4>
        <button v-on:click="gb" style="position:absolute;top:0;right:0">关闭</button>
        <table border="" cellspacing="" cellpadding="" >
            <p style="color:#fff;margin-left:10%">用户编号：</p>
            <input v-model="m1" type="text" class="form-control" style="width:80%;margin:0 auto"/><br/>
            <p style="color:#fff;margin-left:10%">用户名：</p>
            <input v-model="m2" type="text" class="form-control" style="width:80%;margin:0 auto"/><br/>
            <p style="color:#fff;margin-left:10%">用户手机:</p>
            <input v-model="m3" type="text" class="form-control" style="width:80%;margin:0 auto"/><br/>
            <p style="color:#fff;margin-left:10%">用户等级：</p>
            <select v-model="m4" type="text" class="form-control" style="width:80%;margin:0 auto" name="">
                <option value="0">普通消费者</option>
                <option value="1">分销商</option>
                <option value="2">代理商</option>
                <option value="3">服务商</option>
            </select>
            <button v-on:click="ti(m1,m4)" class="btn btn-danger" style="margin:0 auto;display:block">提交</button>
        </table>
    </div>
    <div id="tantwo">
        <h4 style="color:#fff;text-align: center;">上级信息</h4>
        <button v-on:click="gbtwo()" style="position:absolute;top:0;right:0">关闭</button>
        <table border="" cellspacing="" cellpadding="">
            <p style="color:#fff;margin-left:10%">上级用户id：</p>
            <input id="s1" v-model="s1" type="text" class="form-control" style="width:80%;margin:0 auto"/><br/>
            <p style="color:#fff;margin-left:10%">上级用户手机</p>
            <input id="s2" v-model="s2" type="text" class="form-control" style="width:80%;margin:0 auto"/><br/>
            <p style="color:#fff;margin-left:10%">上上级用户id:</p>
            <input id="s3" v-model="s3" type="text" class="form-control" style="width:80%;margin:0 auto"/><br/>
            <p style="color:#fff;margin-left:10%">上上级用户手机:</p>
            <input id="s4" v-model="s4" type="text" class="form-control" style="width:80%;margin:0 auto"/>
            <p style="color:#fff;margin-left:10%">上上上级用户id:</p>
            <input id="s5" v-model="s5" type="text" class="form-control" style="width:80%;margin:0 auto"/><br/>
            <p style="color:#fff;margin-left:10%">上上上级用户手机:</p>
            <input id="s6" v-model="s6" type="text" class="form-control" style="width:80%;margin:0 auto"/>
        </table>
    </div>
    <div id="tanth">
        <h4 style="color:#fff;text-align: center;">用户信息备注</h4>
        <button id="bbt" v-on:click="bbt()">×</button>
    </div>
     <div id="tanth2">
        <h4 style="color:#000;text-align:center;">用户实名信息上传</h4>
        <button id="bbt" v-on:click="bbt2()">×</button>
        
        <div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
            <table class="table table-hover">               
                <tbody>                   
                    <tr>
                        <td>用户ID:</td>
                        <td colspan="3">
                            <input id="p3" v-model="this.p3" class="form-control" type="text"  style="width:280px;"/>
                            
                        </td>                               
                    </tr>
                    <tr>
                        <td>姓名:</td>
                        <td colspan="3">
                            <input id="p1" class="form-control" type="text"  style="width:280px;"/>
                            
                        </td>                               
                    </tr>
                    <tr>
                        <td>身份证号码:</td>
                        <td colspan="3">
                            <input id="p2" class="form-control" type="text" style="width:280px;"/>
                            
                        </td>               
                    </tr>
                    <tr>                        
                        <td colspan="8">
                                <button id="btn" v-on:click="renzheng()" class="btn btn-danger" style="margin:0 auto;display:block;">实名认证</button>                                  
                        </td>                                       
                    </tr>
                    
                </tbody>
            </table>        
        </div>
        <div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
        <p>真实照片提交</p>
            <form action=window.baseUrl+"user/upload/realname" method="post" enctype="multipart/form-data">
            <input type="file"  name="image"/>
            <input type="file"  name="image"/>
            <input type="file"  name="image"/>
            <input type="hidden" name="token" id="token"/>      
            手机号码：<input class="form-control" type="text"  name="phone" id="phone" style="width:200px;" />
     
            <input type="submit"  id="submit" value="提交照片" class="btn btn-danger"  style="width:150px;margin-top:18px" />   
         </form> 
     
        </div>
         </div>
</div>
</body>
<script>
    $(function(){
        /*自定义时间戳*/
        Vue.filter('time', function (value) {//value为13位的时间戳
            function add0(m) {
                return m < 10 ? '0' + m : m
            }
            var time = new Date(parseInt(value));
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            return y + '-' + add0(m) + '-' + add0(d);
        });

        /*自定义过滤器*/
        Vue.filter("todo",function(value){
            if(value == 0){
                return value = "消费者"
            }
            if(value == 1){
                return value = "分销商"
            }
            if(value == 2){
                return value = "代理商"
            }
            if(value == 3){
                return value = "服务商"
            }
        });

        /*自定义过滤器*/
        Vue.filter("todo2",function(value){
            if(value == 0){
                return value = "未审核"
            }
            if(value == 1){
                return value = "已通过  √"
            }
            if(value == 2){
                return value = "审核失败×"
            }
            if(value == 3){
                return value = "未提交"
            }
        });
        new Vue({
            el:"#box",
            data: {
                list:[],
                token:"",
                m1:"",
                m2:"",
                m3:"",
                m4:"",
                s1:"",
                s2:"",
                s3:"",
                s4:"",
                s5:"",
                s6:"",
                ph:"",
                ye:"",
                pages:"",
                page:"",
                idcade:"",
                ye1:1,
                ss:[]
            },
            created:function(){/*生命周期函数*/
                this.$http.post(window.baseUrl+"user/info/query",{},{emulateJSON:true}).then(
                    function (res){
                        console.log(res);
                        console.log(res.data.result);
                        if(res.data.result.length<=0){
                            alert("暂无下级会员")
                        }else{
                            this.list = res.data.result.content;
                            this.pages = res.data.result.totalElememts;
                            this.page  = res.data.result.totalpages;
                        }
                    },function (res) {
                        /*console.log(res);*/
                        /*alert("查询失败,请重试！")*/
                    }
                );
            },
            methods:{
                /*审核状态查询*/
                xuan:function(){
                    var sel = $('#sel').find('option:selected').val();
                    console.log(sel)
                    this.$http.post(window.baseUrl+"user/info/query",{size:100000,realnameStatus:sel},{emulateJSON:true}).then(
                        function (res){
                            console.log(res)
                            console.log(res.data.result)
                            if(res.data.result.length<=0){
                                alert("暂无下级会员")
                            }else{
                                this.list = res.data.result.content;
                                this.pages = res.data.result.totalElememts;
                                console.log(res.data.result.totalElememts)
                                this.page  = res.data.result.totalpages;
                            }
                        },function (res) {
                            console.log(res);
                            alert("查询失败！")
                        }
                    );
                },
                /*身份证号码查询*/
                cade:function(){
                        console.log(this.idcade)
                    this.$http.post(window.baseUrl+"user/info/query",{realnameStatus:sel,idcard:this.idcade},{emulateJSON:true}).then(
                        function (res){
                            console.log(res)
                            console.log(res.data.result)
                            if(res.data.result.length<=0){
                                alert("暂无下级会员");
                            }else{
                                this.list = res.data.result.content;
                                this.pages = res.data.result.totalElememts;
                                console.log(res.data.result.totalElememts)
                                this.page  = res.data.result.totalpages;
                            }
                        },function (res) {
                            console.log(res);
                            alert("查询失败！")
                        }
                    );
                },
                /*打开备注面板*/
                bz:function () {
                    $('#tanth').animate({height:'toggle'})
                    $('#tanth').css("display","block")
                },
                /*关闭备面板*/
                bbt:function(){
                    $('#tanth').css('display','none')
                },
                shi:function(i){                 
                    var p3 = i.userid;
                    $('#p3').val(p3);
                    $('#phone').val(i.phone)
                    $('#tanth2').animate({height:'toggle'});
                    $('#tanth2').css("display","block");
                },
                 bbt2:function(){
                    $('#tanth2').css('display','none')
                },
                renzheng:function(){
                    var p1 = $("#p1").val();
                    var p2 = $("#p2").val();
                    var p3 = $('#p3').val();
                    if(p1!="" && p2!=""){
                        $.ajax({
                            type:"POST",
                            url:window.baseUrl+"paymentchannel/realname/auth/backstage",
                            async:true,
                            data:{
                                realname:p1,
                                idcard:p2,
                                userid:p3
                            },
                            dataType:"json",
                            success:function(data){
                                console.log("远程调用数据开始。。。")
                                console.log(data)
                                alert(data.resp_message)           
                            },
                            error:function(data){
                                alert("实名认证失败")
                                console.log("调用失败！")
                                console.log(data)
                                $("#p1").val("");
                                $("#p2").val("");   
                            }
                        }) 
                    }else{
                    alert("请完善输入信息！")
                }
                   
                },
                /*点击到那一页*/
                xia:function(){
                    var ye1 = this.ye1;
                    console.log(ye1);
                    this.$http.post(window.baseUrl+"user/info/query",{size:20,page:ye1},{emulateJSON:true}).then(
                        function (res){
                            console.log(res);
                            console.log(res.data.result);
                            this.list = res.data.result;
                            this.pages = res.data.result.totalElememts;
                            console.log(res.data.result.totalElememts);
                            this.page  = res.data.result.totalpages;
                        },function (res) {
                            console.log(res);
                            alert("查询失败！")
                        }
                    );
                },
                /*审核状态搜索*/
                xuan:function(){
                    
                        var sel = $('#sel').find('option:selected').val();
                        console.log(sel);
                        this.ye1 = 1;
                        this.$http.post(window.baseUrl+"user/info/query",{size:1000,realnameStatus:sel},{emulateJSON:true}).then(
                            function (res){
                                console.log(res);
                                console.log(res.data.result.content);
                                this.list = res.data.result.content;
                                this.pages = res.data.result.totalElememts;
                                console.log(res.data.result.number);
                                this.page  = res.data.result.totalpages;
                                this.num  =  res.data.result.number;

                            },function (res) {
                                console.log(res);
                                alert("查询失败！")
                            }
                        );
                },
                /*根据手机号码搜索用户*/
                shouji:function(){
                    token = sessionStorage.getItem(key=1);
                    console.log(token);
                    var ph = this.ph;
                    console.log(ph);
                    this.$http.post(window.baseUrl+"user/info/query",{phone:ph},{emulateJSON:true}).then(
                        function (res){
                            console.log(res);
                            console.log(res.data.result);
                            if(res.data.resp_code == 000000){
                                this.list = res.data.result.content;
                                $("#error").text("")
                            }
                            if(res.data.resp_code == 000007){
                                $("#error").text("用户不存在！")
                            }
                        },function (res) {
                            console.log(res)
                            alert("查询失败！")
                        }
                    );
                },
                /*上一页*/
                sh:function(){
                    this.ye1-=1;
                    console.log(this.ye1);
                    if(this.ye1 <= 0){
                        this.ye1 = 1
                    }
                    this.$http.post(window.baseUrl+"user/info/query",{size:10,page:this.ye1-1},{emulateJSON:true}).then(
                        function (res){
                            console.log(res);
                            console.log(res.data.result)	;
                            this.list = res.data.result.content;
                            this.pages = res.data.result.totalElememts;
                            console.log(res.data.result.totalElememts);
                            this.page  = res.data.result.totalpages;
                        },function (res) {
                            console.log(res);
                            alert("查询失败！")
                        }
                    );
                },
                next:function(){/*下一页*/
                    this.ye1+=1;
                    console.log(this.ye1)
                    this.$http.post(window.baseUrl+"user/info/query",{size:10,page:this.ye1-1},{emulateJSON:true}).then(
                        function (res){
                            console.log(res);
                            console.log(res.data.result)	;
                            this.list = res.data.result.content;
                            this.pages = res.data.result.totalElememts;
                            console.log(res.data.result.totalElememts);
                            this.page  = res.data.result.totalpages;
                        },function (res) {
                            console.log(res);
                            alert("查询失败！")
                        }
                    );
                },
                /*首页*/
                home:function(){
                    this.ye1 = 1;
                    this.$http.post(window.baseUrl+"user/info/query",{size:10,page:this.ye1-1},{emulateJSON:true}).then(
                        function (res){
                            console.log(res);
                            console.log(res.data.result)	;
                            this.list = res.data.result.content;
                            this.pages = res.data.result.totalElememts;
                            console.log(res.data.result.totalElememts);
                            this.page  = res.data.result.totalpages;
                        },function (res) {
                            console.log(res);
                            alert("查询失败！")
                        }
                    );

                },
                /*尾页*/
                last:function(page){
                    this.ye1 = page
                    this.$http.post(window.baseUrl+"user/info/query",{size:10,page:this.ye1-1},{emulateJSON:true}).then(
                        function (res){
                            console.log(res);
                            console.log(res.data.result)	;
                            this.list = res.data.result.content;
                            this.pages = res.data.result.totalElememts;
                            console.log(res.data.result.totalElememts);
                            this.page  = res.data.result.totalpages;
                        },function (res) {
                            console.log(res);
                            alert("查询失败！")
                        }
                    );
                },
                /*查看下级会员*/
                cha:function(){
                    token = sessionStorage.getItem(key=1);
                    var phone = this.ph;
                    console.log(phone);
                    console.log('点击查询。。。');
                    this.$http.post(window.baseUrl+"user/info/"+token,{},{emulateJSON:true}).then(
                        function (res) {
                            console.log(res);
                            console.log(res.data.result);
                            if(res.data.result.length<=0){
                                alert("暂无下级会员")
                            }else{
                                this.list = res.data.result
                            }
                        },function (res) {
                            console.log(res)
                            alert("查询失败！")
                        }
                    );
                },
                /**/
                mm:function(i){
                    $("#tan").css("display","block")
                    this.m1 = i.userid;
                    this.m2 = i.realname;
                    this.m3 = i.phone;
                    this.m4 = i.grade;
                },
                gb:function(){
                    $("#tan").css("display","none")
                },
                ti:function(m1,m4){/*http://192.168.1.168:80/v1.0/user/preuid/update*/
                    this.$http.post(window.baseUrl+"user/grade/update",{
                        id:m1,grade:m4
                    },{emulateJSON:true}).then(
                        function (res) {
                            console.log(res)
                            console.log(res.data.result)
                            alert("成功")
                            location.reload()
                        },function (res) {
                            console.log(res)
                            alert("查询失败！")
                        }
                    );
                },
                mc:function(m3){
                    console.log(m3.phone);
                    sessionStorage.setItem(12,m3.phone)/*手机号*/
                    sessionStorage.setItem(20,m3.idcard)/*身份证号码*/
                    sessionStorage.setItem(21,m3.bankName)/*银行名称*/
                    sessionStorage.setItem(22,m3.cardNo)/*银行卡号*/
                    sessionStorage.setItem(23,m3.realname)/*真实姓名*/
                    /*sessionStorage.setItem(24,m3.phone)*/
                },
                mc2:function(i){
                    console.log(i.userid)
                    sessionStorage.setItem(13,i.userid)
                },
                mk:function(i){
                    console.log(i.userid)
                    sessionStorage.setItem(13,i.userid)
                },
                mv:function(i){
                    console.log(i.userid)
                    sessionStorage.setItem(33,i.userid)
                },
                shang:function(i){
                    var userid = i.userid;
                    $('#tantwo').css('display','block');
                    $.ajax({
                        type:"GET",
                        url:window.baseUrl+"user/superior/userid",
                        async:true,
                        data:{
                            userid:userid
                        },
                        success:function(data){
                            console.log(data)
                            this.ss = data.result
                            console.log(this.ss)
                            if(this.ss.length ==1){
                                this.s1 = this.ss[0].userid;
                                this.s2 = this.ss[0].phone;
                                $('#s1').val(this.s1)
                                $('#s2').val(this.s2)
                            }
                            if(this.ss.length ==2){
                                this.s1 = this.ss[0].userid;
                                this.s2 = this.ss[0].phone;
                                this.s3 = this.ss[1].userid;
                                this.s4 = this.ss[1].phone;
                                $('#s1').val(this.s1)
                                $('#s2').val(this.s2)
                                $('#s3').val(this.s3)
                                $('#s4').val(this.s4)
                            }
                            if(this.ss.length == 3 ){
                                this.s1 = this.ss[0].userid;
                                this.s2 = this.ss[0].phone;
                                this.s3 = this.ss[1].userid;
                                this.s4 = this.ss[1].phone;
                                this.s5 = this.ss[2].userid;
                                this.s6 = this.ss[2].phone;
                                $('#s1').val(this.s1)
                                $('#s2').val(this.s2)
                                $('#s3').val(this.s3)
                                $('#s4').val(this.s4)
                                $('#s5').val(this.s5)
                                $('#s6').val(this.s6)
                            }
                        },
                        error:function(data){
                            console.log(data)
                        }
                    });
                },
                gbtwo:function(){
                    $('#tantwo').css('display','none');
                }

            }
        })
    })
</script>
</html>

